<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>订单处理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="../../css/global.css" media="all">
		<link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../css/table.css"/>

</head>
<body>
<div style="margin: 15px;">
		<div class="layui-tab layui-tab-card">
				<ul class="layui-tab-title">
						<li class="layui-this">待分配</li>
						<li>待接单</li>
						<li>待审核</li>
						<li>申诉中</li>
						<li>待退款</li>
						<li>手动处理</li>
				</ul>
				<div class="layui-tab-content">
						<div class="admin-main">
								<blockquote class="layui-elem-quote">
										<form class="layui-form" action="">
												<div class="layui-form-item">
														<label class="layui-form-label">范围选择</label>
														<div class="layui-input-inline">
																<input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
														</div>
														<div class="layui-input-inline">
																<input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
														</div>
														<label class="layui-form-label">事项状态</label>
														<div class="layui-input-inline">
																<select name="status">
																		<option value="">—— 请选择 ——</option>
																		<option value="已上线">已上线</option>
																		<option value="未上线">未上线</option>
																</select>
														</div>
														<label class="layui-form-label">事项名称</label>
														<div class="layui-input-inline">
																<input type="text" name="title" lay-verify="title" autocomplete="off"
																			 placeholder="请输入标题" class="layui-input">
														</div>
														<button class="layui-btn" lay-submit="" lay-filter="sear">搜索</button>
														<button type="reset" class="layui-btn layui-btn-primary">重置</button>
														<a href="addItems.html" class="layui-btn"><i class="layui-icon"></i>添加</button>
																<a href="items.html" class="layui-btn layui-btn-danger">事项库</a>
												</div>
										</form>
								</blockquote>
						</div>

						<!--待分配-->
						<div class="layui-tab-item layui-show">
								<div class="layui-field-box">
										<div class="site-text">
												<button class="layui-btn layui-btn-warm">派单</button>
										</div>
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all1"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list1"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page1" class="page"></div>
										</div>
								</div>
						</div>
						<!--待接单-->
						<div class="layui-tab-item">
								<div class="layui-field-box">
										<div class="site-text">
												<button class="layui-btn layui-btn-warm">关闭</button>
										</div>
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all1"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list2"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page2" class="page"></div>
										</div>
								</div>
						</div>
						<!--tab 3-->
						<div class="layui-tab-item">
								<div class="layui-field-box">
										<div class="site-text">
												<button class="layui-btn layui-btn-normal">通过</button>
												<button class="layui-btn layui-btn-danger">驳回</button>
												<button class="layui-btn layui-btn-warm">关闭</button>
										</div>
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all1"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list3"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page3" class="page"></div>
										</div>
								</div>
						</div>
						<!--tab 4-->
						<div class="layui-tab-item">
								<div class="layui-field-box">
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all1"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list4"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page4" class="page"></div>
										</div>
								</div>
						</div>
						<!--tab 5-->
						<div class="layui-tab-item">
								<div class="layui-field-box">
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all1"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list5"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page5" class="page"></div>
										</div>
								</div>
						</div>
						<!--tab 6-->
						<div class="layui-tab-item">
								<div class="layui-field-box">
										<table class="site-table table-hover">
												<thead>
												<tr>
														<th><input type="checkbox" id="selected-all4"></th>
														<th>产品编号</th>
														<th>事项名称</th>
														<th>下单人</th>
														<th>下单时间</th>
														<th>状态</th>
														<th>操作</th>
												</tr>
												</thead>
												<tbody id="items-list6"></tbody>
										</table>
										<div class="admin-table-page">
												<div id="page6" class="page"></div>
										</div>
								</div>
						</div>

				</div>
		</div>
</div>
<!--待分配-->
<script id="orderHandle1" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="order4">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<a href="../serviceItems/detail.html?id=67">详情 | </a>
						<a href="javascript:;">派单</a>
				</td>
		</tr>
		{{#  }); }}
</script>
<!--待接单-->
<script id="orderHandle2" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<span class="layui-breadcrumb" lay-separator="|">
								<a href="../serviceItems/detail.html?id=67">详情</a>
								<a href="javascript:;">接单</a>
								<a href="javascript:;">关闭</a>
						</span>
				</td>
		</tr>
		{{#  }); }}
</script>
<!--待审核-->
<script id="orderHandle3" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<a href="../serviceItems/detail.html?id=67">详情 | </a>
						<a href="javascript:;">通过</a>
						<a href="javascript:;">驳回</a>
						<a href="javascript:;">关闭</a>
				</td>
		</tr>
		{{#  }); }}
</script>
<!--申诉中-->
<script id="orderHandle4" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<a href="../serviceItems/detail.html?id=67">详情 | </a>
						<a href="javascript:;">处理</a>
				</td>
		</tr>
		{{#  }); }}
</script>
<!--待退款-->
<script id="orderHandle5" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<a href="../serviceItems/detail.html?id=67">详情 | </a>
						<a href="javascript:;">完成</a>
				</td>
		</tr>
		{{#  }); }}
</script>
<!--手动处理	-->
<script id="orderHandle6" type="text/html">
		{{#  layui.each(d.datalist, function(index, item){ }}
		<tr id="">
				<td><input type="checkbox" class="input-self" id="{{ item.id }}"><label for="{{ item.id }}"></label></td>
				<td>{{ item.id }}</td>
				<td class="title">{{ item.title }}</td>
				<td>{{ item.person }}</td>
				<td>{{ item.date }}</td>
				<td>{{ item.states }}</td>
				<td>
						<a href="../serviceItems/detail.html?id=67">详情 | </a>
						<a href="javascript:;">通过</a>
						<a href="javascript:;">驳回</a>
						<a href="javascript:;">关闭</a>
				</td>
		</tr>
		{{#  }); }}
</script>
<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../plugins/layui/lay/modules/'
    });
    //搜索表单
    layui.use(['form', 'layedit', 'laydate', 'element', 'icheck', 'laypage', 'layer', 'laytpl'], function () {
        var form = layui.form(),
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            element = layui.element(), //Tab的切换功能，切换事件监听等，需要依赖element模块
            laypage = layui.laypage,
            layer = parent.layer === undefined ? layui.layer : parent.layer;
        var orderData = {
            datalist: [
                {
                    id: '1',
                    title: 'aaaaa',
                    person: 'xiaowang',
                    date: '2017-04-20 14:12:23',
                    states: 'ok'
                }, {
                    id: '2',
                    title: 'aaaaa',
                    person: 'xiaowang',
                    date: '2017-04-20 14:12:23',
                    states: 'ok'
                }, {
                    id: '3',
                    title: 'aaaaa',
                    person: 'xiaowang',
                    date: '2017-04-20 14:12:23',
                    states: 'ok'
                }, {
                    id: '4',
                    title: 'aaaaa',
                    person: 'xiaowang',
                    date: '2017-04-20 14:12:23',
                    states: 'ok'
                }, {
                    id: '5',
                    title: 'aaaaa',
                    person: 'xiaowang',
                    date: '2017-04-20 14:12:23',
                    states: 'ok'
                }
            ]
        };
        var editIndex = layedit.build('LAY_demo_editor');
        //创建一个编辑器
        //选项卡切换
        $('.site-demo-active').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //分页加载数据
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });

        // 日期选择器
        var date_start = {
            min: '2010-01-01 00:00:00'
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var date_end = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function () {
            date_start.elem = this;
            laydate(date_start);
        };
        document.getElementById('LAY_demorange_e').onclick = function () {
            date_end.elem = this;
            laydate(date_end);
        };

        //获取数据
        for (var j = 1; j <= 6; j++) {
            //ajaxFn(j, j);
            renderTpl(j, orderData);
            //全选
            $(document).on('ifChanged', '#selected-all' + j, function (event) {
                var $input = $(this).parents('.site-table').find('input');
                $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
            });
        }
        //ajax请求
        function ajaxFn(typeid, num) {
            $.ajax({
                url: "http://221.10.2.222:5680/api/wx/News/ListByType/0/" + typeid + "/1",
                type: "get",
                dataType: "json",
                success: function (data) {
                    renderTpl(typeid, data);
                    laypage({
                        cont: 'page' + num,
                        pages: data.totalpages, //总页数
                        groups: 5, //连续显示分页数
                        skip: true,
                        jump: function (obj, first) {
                            //得到了当前页，用于向服务端请求对应数据
                            if (!first) {
                                $.ajax({
                                    url: "http://221.10.2.222:5680/api/wx/News/ListByType/0/" + typeid + "/" + obj.curr,
                                    type: "get",
                                    dataType: "json",
                                    async: false,
                                    success: function (data) {
                                        renderTpl(typeid, data);
                                    }
                                });
                            }
                        }
                    });
                }
            });
        }

        function renderTpl(i, data) {
            var tplid = document.getElementById('orderHandle' + i),
                viewid = document.getElementById('items-list' + i);
            var getTpl = tplid.innerHTML;
            laytpl(getTpl).render(data, function (html) {
                viewid.innerHTML = html;
                element.init();
            });
        }

        //监听提交
        form.on('submit(sear)', function (data) {
            layer.alert(JSON.stringify(data.field));
            return false;
        });
        form.render();
    });

</script>

</body>
</html>